<template>
  <div ref="codeContainer" :style="{ height: height + 'px' }"></div>
</template>
<script lang="ts" setup>
import * as monaco from "monaco-editor";
import { onMounted, ref, toRaw, watch } from "vue";
interface Props {
  /**绑定值 */
  value: string;
  /**高度 */
  height: number;
  /**语言 */
  language: string;
}
const props = defineProps<Props>();
const emit = defineEmits(["update:value"]);
const editor = ref<monaco.editor.IStandaloneCodeEditor>();
const codeContainer = ref<HTMLDivElement>();
onMounted(() => {
  editor.value = monaco.editor.create(codeContainer.value, {
    value: props.value,
    language: props.language,
    automaticLayout: true, // 自动布局
    theme: "vs-dark", // 官方自带三种主题vs, hc-black, or vs-dark
    minimap: {
      enabled: true, // 关闭小地图
    },
    lineNumbers: "on", // 隐藏控制行号
  });
  editor.value.onDidChangeModelContent(() => {
    emit("update:value", toRaw(editor.value).getValue());
  });
});
watch(
  () => props.value,
  (value) => {
    if (editor.value) {
      toRaw(editor.value).setValue(value || "");
    }
  }
);
</script>
